<script setup lang="ts">
import { ref } from "vue";
import tree from "./tree.vue";
import { useCourseware } from "./table";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddForm from "./addForm.vue";
import EditForm from "./editForm.vue";
import knowledgeForm from "./knowledgeForm.vue";
import { useLmsStoreHook } from "@/store/modules/lms";
import { ElMessage } from "element-plus";

import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import KnifeFork from "@iconify-icons/ep/knife-fork";
defineOptions({ name: "Courseware" });

const lmsStore = useLmsStoreHook();

const clickAddCoursewareBut = () => {
  coursewareFormRef.value.showdialogForAdd();
};
const formRef = ref();
const clickKnowledgeBut = () => {
  knowledgeFormRef.value.showDialogVisible();
};

const clickMoreBut = () => {
  ElMessage({
    message: "/(ㄒoㄒ)/~~，等哥们弄到显卡再说",
    type: "warning"
  });
};

const {
  knowledgeFormRef,
  coursewareFormRef,
  editFormRef,
  form,
  loading,
  columns,
  dataList,
  pagination,
  buttonClass,
  onSearch,
  resetForm,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useCourseware();
</script>

<template>
  <div>
    <knowledgeForm ref="knowledgeFormRef" />
    <EditForm ref="editFormRef" @onSearchEnv="onSearch" />
    <AddForm ref="coursewareFormRef" @onSearchEnv="onSearch" />
    <div class="main">
      <tree class="w-[17%] float-left" />
      <div class="float-right w-[81%]">
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="bg-bg_color w-[99/100] pl-8 pt-4"
        >
          <el-form-item label="课件名称：">
            <el-input
              v-model="form.name"
              placeholder="请输入课件名称"
              clearable
              class="!w-[160px]"
            />
          </el-form-item>
          <el-form-item label="课件编号：">
            <el-input
              v-model="form.code"
              placeholder="请输入课件编号："
              clearable
              class="!w-[160px]"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon(Search)"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <PureTableBar title="课件管理" @refresh="onSearch">
          <template #buttons>
            <div
              style="
                width: 40px;
                margin-left: 10px;
                padding-top: 9px;
                cursor: pointer;
              "
            >
              <el-checkbox v-model="lmsStore.isMe" />
              <el-tooltip content="只看自己创建的课件" placement="top">
                <IconifyIconOffline
                  :icon="Role"
                  style="display: inline-block"
                  @click="lmsStore.isMe = !lmsStore.isMe"
                />
              </el-tooltip>
            </div>
            <el-button
              type="primary"
              :icon="useRenderIcon(AddFill)"
              @click="clickAddCoursewareBut"
            >
              新增课件
            </el-button>
            <el-button
              type="primary"
              :icon="useRenderIcon(KnifeFork)"
              @click="clickKnowledgeBut"
            >
              向量分析
            </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table
              border
              align-whole="center"
              table-layout="auto"
              :loading="loading"
              :size="size"
              :data="dataList"
              :columns="columns"
              :checkList="checkList"
              :pagination="pagination"
              :paginationSmall="size === 'small' ? true : false"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  @click="handleUpdate(row)"
                  :icon="useRenderIcon(EditPen)"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="是否确认删除?"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button
                      class="reset-margin"
                      link
                      type="primary"
                      :size="size"
                      :icon="useRenderIcon(Delete)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-dropdown>
                  <el-button
                    class="ml-3 mt-[2px]"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(More)"
                  />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <el-button
                          @click="clickMoreBut"
                          :class="buttonClass"
                          link
                          type="primary"
                          :size="size"
                          :icon="useRenderIcon(Role)"
                        >
                          Embedding对话
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          @click="clickMoreBut"
                          :class="buttonClass"
                          link
                          type="primary"
                          :size="size"
                          :icon="useRenderIcon(Password)"
                        >
                          ReRank对话
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          @click="clickMoreBut"
                          :class="buttonClass"
                          link
                          type="primary"
                          :size="size"
                          :icon="useRenderIcon(Password)"
                        >
                          外部大模型支援
                        </el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
